@import "./styles.scss";

.panel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .panel-menu {
    position: relative;
    background: $theme-color-secondary;
    color: $white;
    display: flex;

    .document-details {
      position: relative;
      white-space: nowrap;

      .local-storage-error-icon {
        display: inline-block;
        padding: $margin;
        position: relative;
        color: $white;
      }
    }

    &.wrap {
      flex-wrap: wrap;

      .document-details {
        white-space: normal;
      }
    }

    .unsaved-changes {
      $changed-color: rgba(255,255, 255, 0.5);

      display: inline-block;
      padding: $margin;
      color: $changed-color;
      white-space: nowrap;

      visibility: hidden;
      &.visible {
        visibility: visible;
      }

      &.menu-button {
        color: $changed-color;

        &:hover,
        &:focus {
          color: $white;
          text-decoration: underline;
        }
      }

      button.save-now {
        background: none;
        border: none;
        padding: 0 2px;
        margin: 0;
        color: $changed-color;
        font-size: $font-size;

        &:hover,
        &:focus {
          color: $white;
          text-decoration: underline;
        }
      }
    }

    .menu-button {
      @include generic-button;

      cursor: pointer;
      display: inline-block;
      background: transparent;
      color: white;
      border-radius: 0;
      margin: 0;
      padding: $margin;

      &:hover,
      &:focus {
        background: rgba(255, 255, 255, 0.2);
      }

      &:disabled {
        color: rgba(255, 255, 255, 0.5);

        &:hover,
        &:focus {
          background: none;
          cursor: default;
        }
      }

      &.name {
        text-align: center;

        svg.fa-cloud {
          margin-right: 0.5em;
        }

        svg.fa-edit {
          margin-left: 0.5em;
          visibility: hidden;
          font-weight: normal;
        }

        &:focus,
        &:hover {
          &:not(:disabled) {
            background: rgba(255, 255, 255, 0.2) !important; // FIXME: why is the !important needed?

            svg.fa-edit {
              visibility: visible;
            }
          }
        }

        &.unnamed {
          svg.fa-edit {
            margin-left: 0;
            visibility: visible;
          }
        }
      }

      &.schema {
        &.error {
          color: $red;
        }
      }
    }
  }

  .buttons {
    flex: 1;
    display: inline-block;
    white-space: nowrap;
    text-align: right;

    .dropdown-button {
      position: relative;

      .dropdown-menu {
        display: none;
        position: absolute;
        white-space: normal;
        top: 100%;
        right: 0;
        z-index: 100; // must be above the "loading..." overlay
        width: 180px;
        background: $theme-color-secondary;
        background: $white;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);

        &.wide {
          width: 230px;
        }

        button.dropdown-menu-button {
          @include generic-button;

          color: $black;
          background: $white;
          width: 100%;
          text-align: left;

          svg {
            margin-right: $margin;
          }

          &:hover,
          &:focus {
            background: darken($white, 5%);
          }
        }
      }

      &:hover,
      &:focus {
        .dropdown-menu {
          display: inline-block;
        }
      }
    }
  }

  .panel-contents {
    flex: 1;
    position: relative;
    overflow: hidden; // FIXME: gives issue with JSON schema error popups

    .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: $overlay-background-color;
      z-index: 99;
      text-align: center;
      padding-top: 30%;
      transition: all 1s ease;

      .loading-error {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        color: $red;
      }
    }
  }

  .file-drop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    > .file-drop-target {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      z-index: 100; // above "loading..." spinner
      background-color: $drag-and-drop-background-color;
      border: 2px dashed $dark-gray;
      color: $black;
      text-align: center;
      padding-top: 40%;

      display: none;

      &.file-drop-dragging-over-frame {
        display: block;
        font-weight: bold;

        .drag-text,
        .drop-text {
          background-color: $white;
          padding: 2 * $margin;
          border-radius: $margin;

          content: 'TEST'
        }

        &.file-drop-dragging-over-target {
          border-color: $drag-and-drop-selected-color;
          box-shadow: 0 0 20px 0 $drag-and-drop-selected-shadow-color;
          color: $drag-and-drop-selected-color;
        }
      }
    }
  }

  .jsoneditor {
    .jsoneditor-values {
      border-radius: $border-radius;

      &.diff-added {
        .jsoneditor-tree:not(:first-child),
        .jsoneditor-separator {
          background: $diff-add;
        }
      }
      &.diff-changed {
        .jsoneditor-tree:not(:first-child),
        .jsoneditor-separator {
          background: $diff-change;
        }
      }
      &.diff-removed {
        .jsoneditor-tree:not(:first-child),
        .jsoneditor-separator {
          background: $diff-remove;
        }
      }
    }

    tr.jsoneditor-expandable.jsoneditor-collapsed > td > table.jsoneditor-values.diff-child-changed {
      .jsoneditor-tree:not(:first-child),
      .jsoneditor-separator {
        background: $diff-change-child;
      }
    }
  }
}

.modal-foreground.open-url-prompt,
.modal-foreground.save-url-prompt {
  width: 700px;
}

.local-storage-error-wrapper {
  display: inline-block;
}

.local-storage-error .react-tooltip-lite {
  max-width: 400px !important;
}
